<template>
    <header class="app-header" :class="{ 'dark-mode': isDark, 'header-fixed': isFixed }">
      <div class="header-container">
        <!-- Logo 区域 -->
        <div class="logo-section">
          <router-link to="/" class="logo-link">
        <img src="@/assets/logo.svg" alt="Logo" class="navbar-logo">
        <span class="site-name">技术博客</span>
      </router-link>

        </div>
  
        <!-- 导航菜单 -->
        <nav class="nav-menu">
          <router-link 
            v-for="item in menuItems" 
            :key="item.path"
            :to="item.path"
            class="nav-item"
            :class="{ active: currentPath === item.path }"
          >
            <i :class="item.icon"></i>
            {{ item.name }}
          </router-link>
        </nav>
  
        <!-- 搜索栏 -->
        <div class="search-section" :class="{ active: isSearchFocused }">
          <div class="search-box">
            <i class="fas fa-search search-icon"></i>
            <input
              type="text"
              v-model="searchQuery"
              @focus="isSearchFocused = true"
              @blur="handleSearchBlur"
              placeholder="搜索文章..."
              class="search-input"
            >
            <div class="search-shortcuts" v-if="!isSearchFocused">
              <span class="shortcut-key">⌘</span>
              <span class="shortcut-key">K</span>
            </div>
          </div>
          
          <!-- 搜索结果下拉框 -->
          <div class="search-dropdown" v-if="isSearchFocused && searchQuery">
            <div class="search-results">
              <!-- 可选：添加分组标题 -->
              <div class="search-group">文章</div>
              
              <div 
                v-for="result in searchResults" 
                :key="result.id"
                class="search-result-item"
                @click="handleResultClick(result)"
              >
                <div class="result-icon">
                  <i :class="result.icon"></i>
                </div>
                <div class="result-content">
                  <div class="result-title">{{ result.title }}</div>
                  <div class="result-meta">
                    <span>{{ result.category }}</span>
                    <span>{{ result.date }}</span>
                  </div>
                </div>
              </div>
              
              <!-- 无结果状态 -->
              <div v-if="searchResults.length === 0" class="no-results">
                未找到相关结果
              </div>
            </div>
            
            <!-- 键盘快捷键提示 -->
            <div class="shortcut-hint">
              <span>键盘快捷键</span>
              <div class="shortcut-keys">
                <span class="key">↑</span>
                <span class="key">↓</span>
                <span>选择</span>
                <span class="key">Enter</span>
                <span>确认</span>
                <span class="key">Esc</span>
                <span>关闭</span>
              </div>
            </div>
          </div>
        </div>
  
        <!-- 右侧工具栏 -->
        <div class="toolbar">
          <!-- 主题切换 -->
          <button class="toolbar-btn" @click="$emit('toggle-theme')">
            <i :class="isDark ? 'fas fa-sun' : 'fas fa-moon'"></i>
          </button>
  
          <!-- GitHub 链接 -->
          <a href="https://github.com/yourusername" target="_blank" class="toolbar-btn">
            <i class="fab fa-github"></i>
          </a>
  
          <!-- 通知 -->
          <div class="notification-btn">
            <button class="toolbar-btn" @click="toggleNotifications">
              <i class="fas fa-bell"></i>
              <span v-if="unreadCount" class="notification-badge">{{ unreadCount }}</span>
            </button>
            <!-- 通知下拉框 -->
            <div class="notification-dropdown" v-if="showNotifications">
              <div class="notification-header">
                <h3>通知</h3>
                <button @click="markAllRead" class="read-all-btn">全部已读</button>
              </div>
              <div class="notification-list">
                <div 
                  v-for="notice in notifications" 
                  :key="notice.id"
                  class="notification-item"
                  :class="{ unread: !notice.read }"
                >
                  <div class="notice-icon">
                    <i :class="notice.icon"></i>
                  </div>
                  <div class="notice-content">
                    <div class="notice-title">{{ notice.title }}</div>
                    <div class="notice-time">{{ notice.time }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
  
          <!-- 用户菜单 -->
          <div class="user-menu">
            <button class="user-btn" @click="toggleUserMenu">
              <img :src="userAvatar" alt="用户头像" class="user-avatar">
            </button>
            <!-- 用户菜单下拉框 -->
            <div class="user-dropdown" v-if="showUserMenu">
              <div class="user-info">
                <img :src="userAvatar" alt="用户头像" class="user-avatar-large">
                <div class="user-details">
                  <div class="user-name">{{ userName }}</div>
                  <div class="user-email">{{ userEmail }}</div>
                </div>
              </div>
              <div class="menu-items">
                <router-link to="/profile" class="menu-item">
                  <i class="fas fa-user"></i>
                  个人资料
                </router-link>
                <router-link to="/settings" class="menu-item">
                  <i class="fas fa-cog"></i>
                  设置
                </router-link>
                <button class="menu-item" @click="handleLogout">
                  <i class="fas fa-sign-out-alt"></i>
                  退出登录
                </button>
              </div>
            </div>
          </div>
  
          <!-- 写文章按钮 -->
          <button class="create-btn" @click="$emit('create-article')">
            <i class="fas fa-pen"></i>
            写文章
          </button>
        </div>
      </div>
    </header>
  </template>
  
  <script>
  export default {
    name: 'AppHeader',
  
    props: {
      isDark: {
        type: Boolean,
        default: false
      }
    },
  
    data() {
      return {
        isFixed: false,
        isSearchFocused: false,
        searchQuery: '',
        showNotifications: false,
        showUserMenu: false,
        currentPath: '/',
        unreadCount: 3,
        
        menuItems: [
          { name: '首页', path: '/', icon: 'fas fa-home' },
          { name: '分类', path: '/categories', icon: 'fas fa-th-large' },
          { name: '归档', path: '/archives', icon: 'fas fa-archive' },
          { name: '关于', path: '/about', icon: 'fas fa-user' }
        ],
  
        notifications: [
          {
            id: 1,
            title: '您的文章收到了新的评论',
            time: '10分钟前',
            icon: 'fas fa-comment',
            read: false
          },
          {
            id: 2,
            title: '系统更新提醒',
            time: '1小时前',
            icon: 'fas fa-bell',
            read: false
          },
          {
            id: 3,
            title: '您的文章被收藏了',
            time: '2小时前',
            icon: 'fas fa-star',
            read: false
          }
        ],
  
        userAvatar: 'https://picsum.photos/50/50',
        userName: '测试用户',
        userEmail: 'test@example.com'
      }
    },
  
    computed: {
      searchResults() {
        // 模拟搜索结果
        if (!this.searchQuery) return []
        return [
          {
            id: 1,
            title: '文章标题1',
            category: '前端开发',
            date: '2024-03-20',
            icon: 'fas fa-file-alt'
          },
          {
            id: 2,
            title: '文章标题2',
            category: '后端开发',
            date: '2024-03-19',
            icon: 'fas fa-file-alt'
          }
        ]
      }
    },
  
    mounted() {
      window.addEventListener('scroll', this.handleScroll)
      this.currentPath = this.$route.path
      
      // 监听快捷键
      window.addEventListener('keydown', this.handleShortcut)
    },
  
    beforeDestroy() {
      window.removeEventListener('scroll', this.handleScroll)
      window.removeEventListener('keydown', this.handleShortcut)
    },
  
    methods: {
      handleScroll() {
        this.isFixed = window.scrollY > 0
      },
  
      handleSearchBlur() {
        setTimeout(() => {
          this.isSearchFocused = false
        }, 200)
      },
  
      handleResultClick(result) {
        this.$router.push(`/article/${result.id}`)
        this.searchQuery = ''
        this.isSearchFocused = false
      },
  
      toggleNotifications() {
        this.showNotifications = !this.showNotifications
        if (this.showUserMenu) this.showUserMenu = false
      },
  
      toggleUserMenu() {
        this.showUserMenu = !this.showUserMenu
        if (this.showNotifications) this.showNotifications = false
      },
  
      markAllRead() {
        this.notifications.forEach(notice => {
          notice.read = true
        })
        this.unreadCount = 0
      },
  
      handleLogout() {
        // 实现登出逻辑
        this.$message.success('退出成功')
        this.$router.push('/login')
      },
  
      handleShortcut(event) {
        // 检测 Cmd+K 或 Ctrl+K
        if ((event.metaKey || event.ctrlKey) && event.key === 'k') {
          event.preventDefault()
          this.$refs.searchInput?.focus()
        }
      }
    }
  }
  </script>
  
  <style>
  .app-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 64px;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    z-index: 100;
    transition: all 0.3s ease;
  }
  
  .header-fixed {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  }
  
  .header-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 24px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  /* Logo 样式 */
  .logo-link {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
  }
  
  .logo-image {
    height: 32px;
    width: auto;
  }
  
  .logo-text {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
  }
  
  /* 导航菜单 */
  .nav-menu {
    display: flex;
    gap: 24px;
  }
  
  .nav-item {
    text-decoration: none;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 6px;
    transition: all 0.3s ease;
  }
  
  .nav-item:hover {
    color: var(--primary-color);
    background: var(--hover-bg);
  }
  
  .nav-item.active {
    color: var(--primary-color);
    background: var(--primary-light);
  }
  
  /* 搜索栏 */
  .search-section {
    position: relative;
    width: 300px;
  }
  
  .search-box {
    position: relative;
    width: 100%;
  }
  
  .search-input {
    width: 100%;
    height: 36px;
    padding: 0 36px;
    border: 1px solid var(--border-color);
    border-radius: 18px;
    background: var(--input-bg);
    color: var(--text-primary);
    transition: all 0.3s ease;
  }
  
  .search-input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px var(--primary-light);
  }
  
  .search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-tertiary);
  }
  
  .search-shortcuts {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 4px;
  }
  
  .shortcut-key {
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--tag-bg);
    color: var(--text-tertiary);
    font-size: 12px;
  }
  
  /* 工具栏 */
  .toolbar {
    display: flex;
    align-items: center;
    gap: 16px;
  }
  
  .toolbar-btn {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: none;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
  }
  
  .toolbar-btn:hover {
    background: var(--hover-bg);
    color: var(--primary-color);
  }
  
  /* 通知样式 */
  .notification-btn {
    position: relative;
  }
  
  .notification-badge {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    border-radius: 9px;
    background: var(--error-color);
    color: #fff;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* 用户菜单 */
  .user-btn {
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
  }
  
  .user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
  }
  
  /* 创建按钮 */
  .create-btn {
    height: 36px;
    padding: 0 20px;
    border: none;
    border-radius: 18px;
    background: var(--primary-color);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
  }
  
  .create-btn:hover {
    background: var(--primary-hover);
  }
  
  /* 暗色模式 */
  .dark-mode {
    background: rgba(26, 26, 26, 0.8);
  }
  
  /* 响应式设计 */
  @media (max-width: 1024px) {
    .nav-menu {
      display: none;
    }
    
    .search-section {
      width: 240px;
    }
  }
  
  @media (max-width: 768px) {
    .header-container {
      padding: 0 16px;
    }
  
    .logo-text {
      display: none;
    }
  
    .search-section {
      display: none;
    }
  
    .toolbar-btn span {
      display: none;
    }
  }
  
  /* 通知下拉框样式 */
  .notification-dropdown {
    position: absolute;
    top: 48px;
    right: -10px;
    width: 360px;
    background: var(--bg-white);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    border: 1px solid var(--border-color);
    z-index: 1000;
    overflow: hidden;
  }
  
  .notification-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
  }
  
  .notification-header h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
  }
  
  .read-all-btn {
    padding: 4px 12px;
    border: none;
    background: var(--primary-light);
    color: var(--primary-color);
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
  }
  
  .read-all-btn:hover {
    background: var(--primary-hover);
    color: white;
  }
  
  .notification-list {
    max-height: 400px;
    overflow-y: auto;
  }
  
  .notification-item {
    display: flex;
    align-items: flex-start;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    transition: all 0.3s ease;
    cursor: pointer;
  }
  
  .notification-item:hover {
    background: var(--hover-bg);
  }
  
  .notification-item.unread {
    background: var(--primary-light);
  }
  
  .notice-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--tag-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    color: var(--primary-color);
  }
  
  .notice-content {
    flex: 1;
  }
  
  .notice-title {
    font-size: 14px;
    color: var(--text-primary);
    margin-bottom: 4px;
    line-height: 1.4;
  }
  
  .notice-time {
    font-size: 12px;
    color: var(--text-tertiary);
  }
  
  /* 用户下拉菜单样式 */
  .user-dropdown {
    position: absolute;
    top: 48px;
    right: -10px;
    width: 280px;
    background: var(--bg-white);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    border: 1px solid var(--border-color);
    z-index: 1000;
    overflow: hidden;
  }
  
  .user-info {
    padding: 20px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
  }
  
  .user-avatar-large {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 16px;
  }
  
  .user-details {
    flex: 1;
  }
  
  .user-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
  }
  
  .user-email {
    font-size: 14px;
    color: var(--text-secondary);
  }
  
  .menu-items {
    padding: 8px 0;
  }
  
  .menu-item {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 14px;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
  }
  
  .menu-item:hover {
    background: var(--hover-bg);
    color: var(--primary-color);
  }
  
  .menu-item i {
    margin-right: 12px;
    width: 16px;
    color: var(--text-secondary);
  }
  
  .menu-item:hover i {
    color: var(--primary-color);
  }
  
  /* 添加CSS变量 */
  :root {
    --bg-white: #ffffff;
    --primary-color: #3b82f6;
    --primary-light: rgba(59, 130, 246, 0.1);
    --primary-hover: #2563eb;
    --text-primary: #1f2937;
    --text-secondary: #4b5563;
    --text-tertiary: #9ca3af;
    --border-color: #e5e7eb;
    --hover-bg: #f3f4f6;
    --tag-bg: #f3f4f6;
    --error-color: #ef4444;
  }
  
  /* 暗色模式变量 */
  .dark-mode {
    --bg-white: #1f2937;
    --text-primary: #f3f4f6;
    --text-secondary: #d1d5db;
    --text-tertiary: #9ca3af;
    --border-color: #374151;
    --hover-bg: #374151;
    --tag-bg: #374151;
  }
  
  /* 搜索框下拉菜单样式 */
  .search-dropdown {
    position: absolute;
    top: 44px;
    left: 0;
    right: 0;
    background: var(--bg-white);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    border: 1px solid var(--border-color);
    z-index: 1000;
    max-height: 400px;
    overflow-y: auto;
  }
  
  .search-results {
    padding: 8px 0;
  }
  
  .search-result-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    cursor: pointer;
    transition: all 0.3s ease;
  }
  
  .search-result-item:hover {
    background: var(--hover-bg);
  }
  
  .result-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--primary-light);
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
  }
  
  .result-content {
    flex: 1;
    min-width: 0; /* 防止文本溢出 */
  }
  
  .result-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .result-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: var(--text-tertiary);
  }
  
  .result-meta span {
    display: flex;
    align-items: center;
  }
  
  .result-meta span::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--text-tertiary);
    margin-right: 8px;
  }
  
  .result-meta span:first-child::before {
    display: none;
  }
  
  /* 搜索结果分组 */
  .search-group {
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--tag-bg);
  }
  
  /* 无结果状态 */
  .no-results {
    padding: 24px;
    text-align: center;
    color: var(--text-tertiary);
  }
  
  /* 搜索框激活状态 */
  .search-section.active .search-input {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px var(--primary-light);
  }
  
  /* 滚动条样式 */
  .search-dropdown::-webkit-scrollbar {
    width: 8px;
  }
  
  .search-dropdown::-webkit-scrollbar-track {
    background: transparent;
  }
  
  .search-dropdown::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
  }
  
  .search-dropdown::-webkit-scrollbar-thumb:hover {
    background: var(--text-tertiary);
  }
  
  /* 键盘快捷键提示 */
  .shortcut-hint {
    padding: 12px 16px;
    border-top: 1px solid var(--border-color);
    font-size: 12px;
    color: var(--text-tertiary);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .shortcut-keys {
    display: flex;
    gap: 4px;
  }
  
  .key {
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--tag-bg);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
  }
  .navbar-brand {
  display: flex;
  align-items: center;
}

.logo-link {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}

.navbar-logo {
  height: 32px; /* 调整 logo 大小 */
  width: auto;
}

.site-name {
  font-size: 1.2rem;
  font-weight: 600;
}

/* 暗色模式适配 */
.dark-mode .navbar-logo {
  filter: brightness(0.9); /* 可选：在暗色模式下稍微调整 logo 亮度 */
}
  </style> 